<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{background: rgb(242,242,242);}
        .protable td{height: 36.89px;}
        .protable{
            width: 1101px;
            margin-top: 26px;
            background: white;
            text-align: center;
            border-color: rgb(242,242,242);
            position: relative;
            top: 63px;
        }

        [name=cname]{
            height: 30px;
            border-radius: 3px;
            margin-left: 10px;
            outline: none;
        }
        .produce_select_form{
            width: 300px;
            height: 32px;
            padding-top: 49px;
            padding-left: 98px;

        }
        .sel_produce{
            height: 32px;
            border: none;
            background: rgb(0,150,136);
            color: white;

        }
        .add_produce_button{

            background: rgb(0,150,136);
            height: 30px;
            width: 100px;
            text-align: center;
            border-radius: 3px;
            margin-left: 99px;
            margin-top: 17px;
            font-size: 14px;

        }
        .add_produce_button a{
            color: white;
            text-decoration: none;
            position: relative;
            top: 4px;
        }
        tr:hover{background: rgb(242,242,242);}
        .optarea{width: 1299px;background: white;margin-top: 18px;}
        .a_href{
            background: rgb(0,150,136);
            width: 34px;
            height: 22px;
            margin: auto;
            display: inline-block;
            position: relative;
            top: 2px;
        }
        .a_href a{
            text-decoration: none;
            color: white;
            font-size: 11px;
            position: relative;
            top: -2px;
        }
        input{outline: none}
        .jnum{width: 65px;
            height: 16px;}
        .cancle{
            background: rgba(255,87,34);
            width: 34px;
            height: 22px;
            display: inline-block;
            position: relative;
            top: 2px;
            margin-left: 7px;
        }
        .cancle span{
            position: relative;
            top: -2px;
            font-size: 11px;
            color: white;
            cursor: pointer;
        }
        .opt_del{
            background: rgb(0,150,136);
            width: 34px;
            height: 22px;
            border-radius: 3px;
            float: left;
            margin-left: 20px;
        }
        .opt_mod{
            background: rgba(255,87,34);
            width: 34px;
            height: 22px;
            border-radius: 3px;
            float: left;

        }
        .opt_watch{
            background-color: #1E9FFF;
            width: 34px;
            height: 22px;
            border-radius: 3px;
            float: left;
            margin-left: 20px;
        }
        .opt_del span{position: relative;
            top: -2px;
            font-size: 11px;
            color: white;
        }
        .opt_watch,.opt_del,.opt_mod{
            cursor: pointer;
        }
        .opt_mod span{position: relative;
            top: -2px;
            color: white;
            font-size: 11px;
        }
        .opt_watch span{position: relative;
            top: -2px;
            color: white;
            font-size: 11px;
        }
        .opt_option{
            margin: auto;
            height: 22px;
            width: 142px;
        }
        #package_add{
            width: 75px;
            margin-left: 100px;
            position: relative;
            top: 62px;
            background: rgb(0,150,136);
            color: white;
            height: 30px;
            border-radius: 3px;
            text-align: center;
        }
        #package_add span{
            position: relative;
            top: 2px;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div class="optarea">
    <div id="package_add" style="cursor: pointer;"><span>新增套餐</span></div>
    <table border="1px" cellspacing="0" cellpadding="0"  align="center" id="pt" class="protable" >
        <tr style="background: rgb(242,242,242);">
            <td>序号</td>
            <td>套餐编号</td>
            <td>套餐名称</td>
            <td>价钱</td>
            <td>会员</td>
            <td>操作</td>
        </tr>
        <tr th:each="pac,pacState:${paclist}" >
            <td th:text="${pacState.count}"></td>
            <td th:text="${pac.getPid()}"></td>
            <td th:text="${pac.getPname()}"></td>
            <td th:text="${pac.getPrice()}"></td>
            <td th:text="${pac.vipname}"></td>
            <td>
                <div class="opt_option">
                    <input  type="hidden" class="pid" th:value="${pac.getPid()}"/>
                    <div class="opt_mod"><span><a th:href="@{/pac/goPackageInfoPage(pid=${pac.pid})}" style="color: #fff;text-decoration: none">修改</a></span></div>
                    <div class="opt_del"><span>删除</span></div>
                    <div class="opt_watch"><span>详情</span></div>
                </div>
            </td>
        </tr>
        <tr  class="append_info">
            <td colspan="8" style="font-size: 11px;color: black;">暂无信息</td>
        </tr>
    </table>
</div>
<script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        $(".opt_watch").click(function(){

            window.location.href="getproselect?pid="+$(this).prev().prev().prev().val();
        });
        $(".append_info").hide();
        var protableheight=parseInt($(".protable").height())+220;
        $(".optarea").height(protableheight+"px");
        $(".sel_produce").click(function () {

            window.location.href="purchaseRecords?pid="+$(".pid").val();
        });

        var length=document.getElementById("pt").rows.length;
        if(length<=2){
            $(".append_info").show(20);
        }
        $("#package_add").click(function () {
            window.location.href="package_add";
        });
        $(".opt_del").click(function () {
            window.location.href="package_del?id="+$(this).prev().prev().val();
        });

    });
</script>

</body>
</html>
